import React, { useState, useEffect } from "react";
import Taro, { useDidShow, useDidHide } from "@tarojs/taro";
import { View } from "@tarojs/components";
import { Button, Image, Input, Cell } from "@nutui/nutui-react-taro";

import { getMachineList, getMachineInfo } from "../../services/account";
import { showErrorToast, showSuccToast } from "../../utils/util";

import IconScan from "../../assets/imgs/home/icon-scan.svg";
import IconArrowRight from "../../assets/imgs/home/icon-arrow-r.svg";

import "./index.scss";

function Home() {
  const [showModal, setShowModal] = useState(0);
  const [machineNameState, setMachineNameState] = useState("");

  const [machineListState, setMachineListState] = useState([]);
  const [machineTotalState, setMachineTotalState] = useState(0);

  const machineStatus = {
    1: "在线",
    2: "离线",
  };

  // 获取-机器列表
  const postMachineList = async () => {
    const payload = {
      page: 1,
      size: 10,
      machineName: machineNameState || "",
    };
    const resData = await getMachineList(payload);
    const { total, list } = resData.data;
    setMachineListState([...list]);
    setMachineTotalState(total);
  };

  // 添加-机器
  const postAddMachine = async (machineCode) => {
    const payload = {
      machineCode,
    };
    const res = await getMachineInfo(payload);

    if (res.code === 200) {
      showSuccToast("添加成功");
      postMachineList();
    }
  };

  // useEffect(() => {
  //   postMachineList();
  // }, []);

  const fnInitState = () => {
    setMachineNameState("");
  };

  useDidShow(() => {
    postMachineList();
  });

  useDidHide(() => {
    // postMachineList();
    fnInitState();
  });

  return (
    <View className="g_home">
      <View className="home_hd">
        <View className="search">
          <Input
            clearable
            value={machineNameState}
            placeholder="搜索设备"
            className="ipt_sch"
            onChange={(val) => {
              // console.log(val);
              setMachineNameState(val);
            }}
            onConfirm={() => {
              // console.log("确认搜索");
              postMachineList();
            }}
          />
        </View>
        <View
          className="btn_scan"
          onClick={() => {
            Taro.scanCode({
              // 只允许相机
              // onlyFromCamera: true,
              success: (res) => {
                const { result, errMsg, rawData, scanType } = res;
                // console.log(res);
                postAddMachine(result);
              },
            });
          }}
        >
          <Image src={IconScan} width={20} height={20} className="icon_scan" />
          <View className="text">添加设备</View>
        </View>
      </View>
      <View className="home_bd">
        <Cell.Group className="machine_list">
          {machineListState.length > 0
            ? machineListState.map((item, index) => (
                <Cell
                  key={index}
                  className="machine_item"
                  title={item.nickName}
                  extra={
                    <View className="status">
                      <View className="u_status">
                        {machineStatus[item.status]}
                      </View>
                      <Image src={IconArrowRight} width="20" height="20" />
                    </View>
                  }
                  onClick={() => {
                    Taro.navigateTo({
                      url: `/pages/home/details?machineCode=${item.machineCode}`,
                    });
                  }}
                />
              ))
            : null}
        </Cell.Group>
      </View>
    </View>
  );
}

export default Home;
